<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>新增文档 - zealously后台管理系统</title>
    <link rel="icon" href="favicon.ico" type="image/ico">
    <meta name="keywords" content="blog"/>
    <meta name="description" content="blog"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vditor@3.3/dist/index.css"/>
    <link th:href="@{/admin/css/materialdesignicons.min.css}" rel="stylesheet">
    <link th:href="@{/admin/css/style.min.css}" rel="stylesheet">
</head>

<body>
<div class="container-fluid p-t-15">

    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <form th:action="@{/admin/blog/add}" method="post" id="blog-form" class="row" th:object="${blog}">
                        <input type="hidden" th:text="${blog.userId}">
                        <input type="hidden" name="published">
                        <input type="hidden" name="id" th:value="*{id}"/>

                        <div class="form-group col-md-2 form-inline">
                            <label>来源</label>
                            <div id="flag" class="xm-select-demo"></div>
                        </div>

                        <div class="form-group col-md-2 form-inline">
                            <label>分类</label>
                            <div id="types" class="xm-select-demo"></div>
                        </div>

                        <div class="form-group col-md-4 form-inline">
                            <label>标签</label>
                            <div id="tags" class="xm-select-demo"></div>
                        </div>
                        <div class="form-group col-md-12">
                            <label for="title">标题</label>
                            <input type="text" class="form-control" id="title" th:value="*{title}" name="title" value=""
                                   placeholder="请输入标题"/>
                        </div>
                        <div class="form-group col-md-12">
                            <label>首图</label>
                            <div class="form-controls">
                                <input type="text" class="form-control" name="firstPicture" th:value="*{firstPicture}"
                                       placeholder="首图引用地址"/>
                            </div>
                        </div>

                        <div class="col-md-12">
                            <label>内容</label>
                                <textarea id="content" name="content" th:text="*{content}"
                                          style="display:none;"></textarea>
                            <div id="vditor"></div>
                        </div>


                        <div class="form-group">
                            <label class="col-xs-12" for="example-textarea-input">文章内容简介</label>
                            <div class="col-xs-12">
                                <textarea class="form-control" id="example-textarea-input" name="description"
                                          th:text="${blog.description}" rows="6" placeholder="请输入内容简介.."></textarea>
                            </div>
                        </div>
                        <div class="form-group col-md-12">
                            <div class="clearfix">
                                <label class="lyear-checkbox checkbox-danger m-t-10">
                                    <input type="checkbox" checked="" name="notice"
                                           th:checked="*{notice}"><span>公告</span>
                                </label>
                                <label class="lyear-checkbox checkbox-primary m-t-10">
                                    <input type="checkbox" checked="" name="carousel" th:checked="*{carousel}"><span>首页轮播</span>
                                </label>
                                <label class="lyear-checkbox checkbox-warning m-t-10">
                                    <input type="checkbox" checked="" name="headline" th:checked="*{headline}"><span>首页头条</span>
                                </label>
                                <label class="lyear-checkbox checkbox-success m-t-10">
                                    <input type="checkbox" name="recommend" th:checked="*{recommend}"><span>推 荐</span>
                                </label>
                                <label class="lyear-checkbox checkbox-purple m-t-10">
                                    <input type="checkbox" name="appreciation"
                                           th:checked="*{appreciation}"><span>赞 赏</span>
                                </label>
                                <label class="lyear-checkbox checkbox-dark m-t-10">
                                    <input type="checkbox" name="shareStatement" th:checked="*{shareStatement}"><span>转 载 声 明</span>
                                </label>
                                <label class="lyear-checkbox checkbox-pink m-t-10">
                                    <input type="checkbox" name="comment" th:checked="*{comment}"><span>评 论</span>
                                </label>
                            </div>
                        </div>

                        <div class="form-group col-md-12">
                            <button type="button" id="submit-btn" class="btn btn-primary ajax-post"
                                    target-form="add-form">发 布
                            </button>
                            <button type="button" id="save-btn" class="btn btn-primary ajax-post"
                                    target-form="add-form">保 存
                            </button>
                            <button type="button" class="btn btn-default"
                                    onclick="javascript:history.back(-1);return false;">返 回
                            </button>
                        </div>
                    </form>

                </div>
            </div>
        </div>

    </div>

</div>

<script src="https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vditor@3.3/dist/index.min.js"></script>
<script type="text/javascript" th:src="@{/admin/js/main.min.js}"></script>
<script th:src="@{/admin/js/xm-select/xm-select.js}"></script>
<script type="text/javascript">
    let img_text = '';
    let content = document.getElementById("content");
    let vditor = new Vditor('vditor', {
        "height": 450,
        "minHeight": 300,
        lineNumber: true,
        outline: true,
        value: content.defaultValue,
        cache: {
            enable: false
        },
        upload: {
            accept: 'image/*',
            fieldName: "images",
            url: '/admin/imageUpload',
            linkToImgUrl: '/admin/imageUpload',
            filename(name) {
                return name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').replace('/\\s/g', '')
            },
            success(editor, data) {
                let res = JSON.parse(data);
                for (let i = 0; i < res.length; i++) {
                    img_text += `\n![](${res[i].url})\n`;
                }
                vditor.insertValue(img_text)
            },
            error(data) {
                alert('上传失败');
            },
        },
    });

    let flags = xmSelect.render({
        el: '#flag',
        radio: true,
        tips: '这里是来源!',
        name: 'flag',
        layVerify: 'required',
        layVerType: 'tips',
        clickClose: true,
        empty: '呀, 没有数据呢',
        theme: {
            color: '#e54d42',
        },
        data: [
            {name: '转载', value: 0},
            {name: '原创', value: 1},
        ]
    })

    let tags = xmSelect.render({
        el: '#tags',
        name: 'tagIds',
        layVerify: 'required',
        layVerType: 'tips',
        tips: '你要选择哪个标签呢?',
        filterable: true,
        autoRow: true,
        empty: '呀, 没有数据呢',
        toolbar: {
            show: true,
        },
        data: [],
        theme: {
            color: '#1cbbb4',
        },
    })

    let types = xmSelect.render({
        el: '#types',
        radio: true,
        tips: '这里是分类!',
        name: 'typeId',
        layVerify: 'required',
        layVerType: 'tips',
        clickClose: true,
        empty: '呀, 没有数据呢',
        theme: {
            color: '#f37b1d',
        },
        data: []
    })

    $.ajax({
        type: 'get',
        url: '/admin/typeList',
        success: function (data) {
            types.update({
                data: data,
            })
        }
    });


    $.ajax({
        type: 'get',
        url: '/admin/tagList',
        success: function (data) {
            tags.update({
                data: data,
            })
        }
    });

    let blogId = $("[name='id']").val();
    let url = '/admin/blog/query/' + blogId;
    $.ajax({
        type: 'get',
        url: url,
        success: function (data) {
            types.setValue([data.type]);
            flags.setValue([data.flag]);
            tags.setValue(data.tag)
        }
    });

    // 保存
    $('#save-btn').click(function () {
        $('[name = "content"]').val(vditor.getValue());
        $('[name = "published"]').val(false);
        $('#blog-form').submit();
    })

    // 发布
    $('#submit-btn').click(function () {
        $('[name = "content"]').val(vditor.getValue());
        $('[name = "published"]').val(true);
        $('#blog-form').submit()
    })
</script>
</body>
</html>